<!--
 * @Author: tangcj 572036028@qq.com
 * @Date: 2024-01-25 10:45:48
 * @LastEditors: tangcj 572036028@qq.com
 * @LastEditTime: 2024-01-30 13:29:42
 * @FilePath: /health-gpt-website/src/views/Home/components/Page2.vue
 * @Description: 文件介绍
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="page2">
    <div class="mainBox">
      <div class="textBox" id="textBoxPage2">
        <span>健康宝互联网技术有限公司是银江股份有限公司旗下的</span>
        <span class="keyWords" id="keyWords1">健康领域解决方案专家</span>
        <br />
        <span>公司主营业务为</span>
        <span class="keyWords" id="keyWords2"
          >互联网健康服务、智慧医疗、可穿戴设备</span
        >
        <span>等</span>
        <br />
        <span>发展方向以</span>
        <span class="keyWords" id="keyWords3">智慧健康和智慧养老</span>
        <span>为主线，以</span>
        <span class="keyWords" id="keyWords4">互联网思维</span>
        <span>为导向，以</span>
        <span class="keyWords" id="keyWords5"
          >“平台+智能终端/可穿戴设
          <br />
          备”的技术体系</span
        >
        <span>为支撑，以</span>
        <span class="keyWords" id="keyWords6">O2O的运营模式</span>
        <span>为创新，依托</span>
        <span class="keyWords" id="keyWords7">健康大数据和云服务</span>
        <span
          >，为用户提供全方
          <br />
          位的</span
        >
        <span class="keyWords" id="keyWords8">健康医疗服务</span>
        <span>。</span>
        <br />
        <span>健康宝公司前身为银江集团中央研究院二级院——</span>
        <span class="keyWords" id="keyWords9">智慧健康研究院</span>
        <br />
        <span>同时也是浙江省政府授予的</span>
        <span class="keyWords" id="keyWords10">“重点企业研究院”</span>
      </div>
    </div>
    <div class="clickBox" @click="nextPage">
      <div class="arrowDown">
        <img src="../../../assets/icon/arrow-down.png" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      showAnimation: false,
    }
  },
  mounted () {
  },
  methods: {
    nextPage () {
      this.$emit('next')
    },
    // 当第一次切换到该页，启用动画
    initAnimation () {
      console.log(1111)

      if (this.showAnimation) { //动画只执行一次
        return false
      }
      // 启用整体文字渲染动画
      let element = document.getElementById("textBoxPage2")
      element.classList.add("textBoxAnimation")
      // 启用关键字动画
      for (let index = 1; index < 11; index++) {
        let dom = document.getElementById("keyWords" + index)
        dom.classList.add("keyWordsAnimation")
        let time = 1.5 + 1 * (index - 1) + 's'
        dom.style.animationDelay = time
        console.log(time)
      }
      // 下次进入该函数不再执行
      this.showAnimation = true
    },
  },
}
</script>
<style scoped lang="less">
.page2 {
  height: 100%;
  width: 100%;
  background: rgb(109, 100, 100);
  display: flex;
  justify-content: center;
  background-image: url(../../../assets/bgImg/bg2.png);
  background-size: 100% 100%;
  background-attachment: fixed;
  .mainBox {
    width: 1200px;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    .textBoxAnimation {
      position: absolute;
      animation: popup 1.5s ease-in-out;
      animation-fill-mode: forwards;
      // animation-delay: 1s; /* 设置动画延迟执行时间 */

      @keyframes popup {
        0% {
          top: 50%;
          opacity: 0;
        }
        100% {
          top: calc(50% - 215px);
          opacity: 1;
        }
      }
    }
    .textBox {
      width: 1200px;
      height: 430px;
      text-align: center;
      // display: flex;
      // flex-wrap: wrap;
      color: #ffffff;
      font-size: 24px;
      justify-content: center;
      line-height: 60px;
      font-weight: 300;
      opacity: 0;
      .keyWordsAnimation {
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.8),
          transparent
        ); /* 创建一道光的背景 */
        background-size: 200% 100%; /* 背景大小，用于创建光滑移动效果 */
        background-clip: text; /* 使背景仅显示在文字内部 */
        // color: transparent; /* 隐藏文字颜色 */
        animation: textShimmer 1s linear infinite; /* 应用动画效果 */
        animation-iteration-count: 1; /* 设置动画迭代次数为1 */
        animation-fill-mode: forwards;
        // animation-delay: 1.5s; /* 设置动画延迟执行时间 */
        background-position: -100% 0;
        @keyframes textShimmer {
          0% {
            background-position: 100% 0;
            color: transparent;
            // font-size: 36px;
          }
          50% {
            background-position: -100% 0;
            // font-size: 36px;
          }
          100% {
            color: #ffffff;
            // font-size: 32px;
          }
        }
      }
      .keyWords {
        font-size: 32px;
        line-height: 57.6px;
        font-weight: 500;
        padding: 0 2px;
      }
    }
  }
}
</style>